import React from 'react';

import { ReactComponent as LogoTB } from '@/assets/images/profile/LogoTB.svg';
import { ReactComponent as Ruble } from '@/assets/images/profile/Ruble.svg';
import { ReactComponent as Stop } from '@/assets/images/profile/Stop.svg';
import { ModalContext } from '@/shared/context/ModalContext';
import { Modals } from '@/shared/interfaces';
import { useMetaTag } from '@/shared/lib/hooks';
import { useAppSelector } from '@/shared/store';
import { Button, ButtonVariants, Modal, Title } from '@/shared/ui';
import { Divider } from '@/shared/ui/Divider';
import { useWindowSize } from 'usehooks-ts';

import { getUserProfile } from '../../model/selectors';
import cs from './ChangeTarif.module.scss';

export const ChangeTarif = () => {
  const { closeModal, openModal } = React.useContext(ModalContext);
  const { width } = useWindowSize();
  useMetaTag(true, '#999999');
  const { isPremium } = useAppSelector(getUserProfile);
  return (
    <Modal containerClassName={cs.modal} isOpen onCloseClick={closeModal}>
      <Title size="modal-size">Премиум</Title>
      <Title className={cs.price} tag="p">
        99 ₽ в месяц{!isPremium && width > 1024 && ', '}
        {!isPremium && width > 1024 && (
          <Button
            data-testid="button-change-tarif"
            onClick={() => openModal(Modals.TarifPlans)}
            variant={ButtonVariants.Link}
          >
            изменить тариф
          </Button>
        )}
      </Title>
      {width < 1024 ? (
        <section className={cs.section}>
          {!isPremium && (
            <>
              <Button className={cs.btn} data-testid="button-change-tarif" variant={ButtonVariants.Logout}>
                <LogoTB /> Продлить подписку
              </Button>
              <Divider />
            </>
          )}
          <Button
            className={cs.btn}
            data-testid="button-change-tarif"
            onClick={() => openModal(Modals.TarifPlans)}
            variant={ButtonVariants.Logout}
          >
            <Ruble /> Изменить тариф
          </Button>
          <Divider />
          <Button
            className={cs.btn_stop}
            data-testid="button-cancel-subscription"
            onClick={() => openModal(Modals.TurnOffPremium)}
            variant={ButtonVariants.Logout}
          >
            <Stop /> Отключить подписку
          </Button>
        </section>
      ) : (
        <>
          {isPremium ? (
            <Button
              className={cs.btn}
              data-testid="button-change-tarif"
              onClick={() => openModal(Modals.TarifPlans)}
              variant={ButtonVariants.Gray}
            >
              Изменить тариф
            </Button>
          ) : (
            <Button className={cs.btn} data-testid="button-change-tarif" variant={ButtonVariants.Green}>
              Продлить подписку
            </Button>
          )}
          <Button
            data-testid="button-cancel-subscription"
            onClick={() => openModal(Modals.TurnOffPremium)}
            variant={ButtonVariants.Logout}
          >
            Отключить подписку
          </Button>
        </>
      )}
    </Modal>
  );
};
